<%@ page import="infomap.Recorrido; infomap.Usuario" %>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
        <meta name="layout" content="main" />
        <g:set var="entityName" value="${message(code: 'usuario.label', default: 'Usuario')}" />
        <script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?sensor=false"></script>
        <script type="text/javascript">
            var directionDisplay;
            var directionsService = new google.maps.DirectionsService();
            var mapOptions = {
                    zoom: 12,
                    mapTypeId: google.maps.MapTypeId.ROADMAP,
                };
            var map;

            function initialize() {
                directionsDisplay = new google.maps.DirectionsRenderer();
                map = new google.maps.Map(document.getElementById("map_canvas"), mapOptions);
                var request = {
                    origin: "${recorrido.origen}",
                    destination: "${recorrido.destino}",
                    region:'ar',
                    travelMode: google.maps.DirectionsTravelMode.DRIVING
                };
                directionsService.route(request, function(response, status) {
                    if (status == google.maps.DirectionsStatus.OK) {
                        directionsDisplay.setMap(map);
                        directionsDisplay.setDirections(response);
                    }
                });
            }

        </script>
    </head>
    <body>
        <g:if test="${flash.message}">
            <div class="message">${flash.message}</div>
        </g:if>

        <div class="map_container">
            <div id="map_canvas" ></div>
        </div>

        <div class="body">
            <g:form  method="post">
                <g:hiddenField name="id" value="${recorrido.id}" />
                <g:hiddenField name="usuarioId" value="${usuarioInstance.id}" />
                <g:hiddenField name="version" value="${usuarioInstance?.version}" />

                <h1>Mostrar recorrido:</h1>
                <div class="dialog">
                    <table>
                        <tbody>
                            <tr class="prop">
                                <td valign="top" class="name">Nombre</td>
                                <td valign="top" class="value">${fieldValue(bean: recorrido, field: "nombre")}</td>
                            </tr>
                            <tr class="prop">
                                <td valign="top" class="name">Origen</td>
                                <td valign="top" class="value">${fieldValue(bean: recorrido, field: "origen")}</td>
                            </tr>
                            <tr class="prop">
                                <td valign="top" class="name">Destino</td>
                                <td valign="top" class="value">${fieldValue(bean: recorrido, field: "destino")}</td>
                            </tr>

                        </tbody>
                    </table>
                </div>

                <div class="buttons">
                    <span class="button">
                        <g:actionSubmit class="save" action="deleteRecorrido" value="Eliminar recorrido" />
                        <g:actionSubmit class="save" action="listRecorridos" value="Volver" />
                    </span>
                </div>

            </g:form>

        </div>
        <script type="text/javascript" language="javascript">
            initialize();
        </script>

    </body>
</html>
